<template>
    <div class="page">
        <nav-bar>
            <!-- 具名插槽 -->
            <template #left>
                <div class="lefts">
                    <van-icon name="arrow-left" @click="$router.go(-1)"></van-icon>
                </div>
            </template>
            <template #center>
                <div>
                    账户信息
                </div>
            </template>
        </nav-bar>
        <div class="user" v-if="userInfo">
            <van-cell is-link>
                <template #title>
                    <span class="custom-title">头像</span>
                </template>
                <template #right-icon>
                    <img :src="'//elm.cangdu.org/img/' + userInfo.avatar" alt="" class="acatar">
                    <van-icon name="arrow" class='right' />
                </template>
            </van-cell>
            <van-cell title="用户名" is-link :value="userInfo.username" />
            <van-cell title="收货地址" is-link  />
        </div>
        <div  v-if="userInfo">
            <p class="bd">
                账号绑定
            </p>
            <van-cell title="手机" is-link  icon="phone-o"/>
        </div>
          <div  v-if="userInfo">
            <p class="bd">
                安全设置
            </p>
           <van-cell title="登录密码" is-link value="修改" />
        </div>
        <div style="width: 95%; margin: 20px auto;"  v-if="userInfo">
            <van-button color="#d8584a" block size="small">退出登录</van-button>
        </div>
    </div>
</template>
<script>
import { getUserMsg } from '@/api/login'
export default {
    data() {
        return {
            userInfo: null
        }
    },
    async created() {
        let data = {
            user_id: this.$store.state.userId
        }
        let res = await getUserMsg(data);
        console.log(res)
        if (res.data.id) {
            this.userInfo = res.data;
        } else {
            this.$router.push("/login");
            localStorage.removeItem("userid");
            this.$store.commit("saveUserid", null)
        }
    }
}
</script>
<style lang="less" scoped>
.user {
    background: #fff;
    margin: 10px 0;
    .acatar {
        width: 40px;
        height: 40px;
        display: block;
        border-radius: 50%;
    }

    .right {
        margin-left: 5px;
        line-height: 40px;
        color: #b4b4b4;
    }
    .custom-title{
        line-height: 40px;
    }
    
}
.bd{
    padding: 10px 15px;
    font-size: 13px;
    color: #666;
}
</style>